<template>
  <!--扫码验证-->
  <div class="content">
    <div class="list">
      <ul>
        <li>请出示给工作人员进行验证</li>
        <li>此服务由北京德人提供</li>
        <li><img :src="imageBase64QRCode" alt="" width="120"></li>
        <li>{{changeCode}}</li>
      </ul>
    </div>
    <wv-button type="default" :plain="true" class="back" @click="goBack()">返回</wv-button>
    <ul class="tip" v-if="accountgoods.isVipCard==1">
      <li>详情说明</li>
      <li>{{goods.useDesc}}</li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {createUserGoodscode} from '../../../test/unit/http'

  export default {
    name: 'saomadetail',
    props: {},
    data() {
      return {
        imageBase64QRCode: '',
        accountGoodsCode: '',
        accountgoods: {},
        goods: {}
      };
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      goCreateUserGoodscode(params) {
        var that = this;
        createUserGoodscode(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.imageBase64QRCode = res.object.imageBase64QRCode;
            that.accountGoodsCode = res.object.accountGoodsCode;
            that.accountgoods = res.object.accountgoods;
            that.goods = res.object.goods;
          }
        })
      }
    },
    created() {
      var accountGoodsId = this.$route.query.accountGoodsId;
      this.goCreateUserGoodscode({accountGoodsId: accountGoodsId});
    },
    computed: {
      changeCode: function () {
        return this.$myUtils.replaceStr(this.accountGoodsCode)
      }
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .content {
    height: 100vh;
    padding-top: 50px;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
  }

  .list {
    width: 80%;
    margin: auto;
    background: url("../../assets/saomabg.png") no-repeat;
    background-size: 100% 100%;

    ul {
      color: #111;
      font-size: 13px;
      padding: 30px;

      li:first-child {
      }

      li:nth-child(2) {
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 20px;
      }

      li:nth-child(3) {
        margin: 10px 0 20px;

        img {
          border: 1px solid #ccc;

        }
      }

    }

  }

  button.weui-btn_plain-default {
    background-color: #fff;
    border: none;
    width: 75%;
    color: #2d93f0;
  }

  .tip {
    text-align: left;
    padding: 40px 20px;

    li:first-child {
      font-size: 17px;
      color: #0d5183;
    }

    li:last-child {
      font-size: 15px;
      line-height: 25px;
      color: #fff;
    }
  }
</style>
